<template>
	<view class="login">
		<view class="re-img">
			<image class="reimg" src="/static/illustration/user-bg.png" mode="scaleToFill"></image>
		</view>
		<view class="img">
			<image class="bg-image" src="/static/login.png" mode="scaleToFill"></image>
		</view>

		<view class="but">
			<MpWeixinMobile :isBtn="isBtn" :isParty="isParty" />
			<view class="text" @click="handleCancel()">
				拒绝登录
			</view>
		</view>

		<view class="info">
			<u-checkbox-group>
				<u-checkbox class="yue" shape="circle" v-model="checked">
					<u-checkbox-group class="yuedu">我已阅读并同意</u-checkbox-group>
				</u-checkbox>
			</u-checkbox-group>
			<view class="xieyi" @click="safe()">《用户协议》</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import * as CaptchaApi from '@/api/captcha'
	import * as Verify from '@/utils/verify'
	import MpWeixinMobile from './components/mp-weixin-mobile.vue'
	export default {
		data() {
			return {
				checked: false,
				checkedValues: [],
				isParty: true,
				// 第三方用户信息数据
				partyData: {},
			}
		},
		components: {
			MpWeixinMobile
		},
		computed: {
			isBtn() {
				return this.checked
			}
		},
		onLoad(options) {},
		onShow(options) {},
		methods: {
			handleCancel() {
				// 跳转回原页面
				this.onNavigateBack()
			},
			// 用户协议
			safe(){
				this.$navTo('pages/user/safe/index')
			},
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			}
		}

	}
</script>


<style lang="scss" scoped>
	.login {
		width: 100%;
		min-height: 100vh;
		padding: 10rpx;
		box-sizing: border-box;
		position: relative;

		.re-img {
			position: absolute;
			z-index: 1;

			.reimg {
				width: 548rpx;
				height: 548rpx;
			}
		}

		.img {
			width: 426rpx;
			display: flex;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;

			.bg-image {
				width: 426rpx;
				height: 410.22rpx;
			}
		}

		.but {
			width: 98%;
			margin: 0 auto;
			margin-top: 200rpx;

			.text {
				text-align: center;
				color: #839289;
				margin-top: 25rpx;
				font-size: 32rpx;
			}
		}

		.info {
			position: absolute;
			bottom: 80rpx;
			display:flex;
			align-items: center;
			width: 100%;
			justify-content: center;

			.yue {
				display: flex;
				align-items: center;
			}

			.yuedu {
				color: #B3B3B3;
				font-size: 24rpx;
				display: inline-flex;
			}

			.xieyi {
				font-size: 24rpx;
				color: #1A8148;
				display: inline-flex;
				margin-left:-20rpx;
			}
		}
	}
</style>